#{extends 'site.html' /} #{set title:'New question' /}

<h2>New Question</h2>

#{if question == null }
	<h4>Step 1/2 : Description</h4>
	
	#{form @Questions.storeQuestion()} 
		
		<p class="bloc_line">
			<label for="questionTitle">Title: </label>
			<input type="text" name="questionTitle" id="questionTitle" value="${questionTitle}" />
			<span class="error">#{error 'questionTitle' /}</span>
		</p>
		<p class="bloc_line">
		   <label style="float: left;">Min difficulty: </label>
		   #{difficulty star:difficulty/}
		   <span class="error">#{error 'difficulty' /}</span>
		</p>
		<p class="bloc_line">
			<label for="second">Time: </label> 
			<input type="text" name="second" id="second" value="${second}" />
			<span class="info">(seconds)</span>
			<span class="error">#{error 'second' /}</span>
		</p>
		<p class="bloc_line">
			<label for="groupType">Type: </label>
			#{select 'groupType', items:models.GroupType.findAll(), valueProperty:'id', value:groupType, labelProperty:'name', id:'group_types' /}
			<span class="error">#{error 'groupType' /}</span>
		</p>
		<p class="bloc_line_area">
			<label for="questionContent">Content: </label>
			<textarea name="questionContent" id="questionContent" cols="80" rows="10">${questionContent}</textarea>
			<span class="error">#{error 'questionContent' /}</span>
		</p>
		<p class="bloc_line_area">
			<label for="explanation">Explanation: </label>
			<textarea name="explanation" cols="80" rows="10">${explanation}</textarea>
			<span class="error">#{error 'explanation' /}</span>
		</p>
		<p class="bloc_line">
			<label for="questionType">Response: </label>
			<input type="radio" name="questionType" value="${models.Question.QuestionType.SIMPLE_CHOICE }" checked="checked" />Simple choice 
         	<input type="radio" name="questionType" value="${models.Question.QuestionType.MULTIPLE_CHOICE }" />Multiple choice
         	<input type="radio" name="questionType" value="${models.Question.QuestionType.TEXT_ANSWER }" />Full text
         	<span class="error">#{error 'questionType' /}</span>
		</p>
		
		<div id="response_bloc">
			<table width="200px" style="display: block; ">
				<thead>
					<tr>
						<th width="30px"><img alt="Correct" src="@{'/public/images/right.png'}" /></th>
						<th width="350px">Responses</th>
					</tr>
				</thead>
				<tbody>
					<tr>
						<td>
							<input type="radio" name="correct" value="1" />
							<input type="checkbox" name="correct1" />
						</td>
						<td>
							<input type="text" name="response1" size="50" value=""/>
						</td>
					</tr>
					<tr>
						<td>
							<input type="radio" name="correct" value="2" />
							<input type="checkbox" name="correct2" />
						</td>
						<td>
							<input type="text" name="response2" size="50" value=""/>
						</td>
					</tr>
					<tr>
						<td>
							<input type="radio" name="correct" value="3" />
							<input type="checkbox" name="correct3" />
						</td>
						<td>
							<input type="text" name="response3" size="50" value="" />
						</td>
					</tr>
					<tr>
						<td>
							<input type="radio" name="correct" value="4" />
							<input type="checkbox" name="correct4" />
						</td>
						<td><input type="text" name="response4" size="50" value="" />
						</td>
					</tr>
					<tr>
						<td>
							<input type="radio" name="correct" value="5" />
							<input type="checkbox" name="correct5" />
						</td>
						<td>
							<input type="text" name="response5" size="50" value=""/>
						</td>
					</tr>
				</tbody>
			</table>
		
		</div>
		
		<script type="text/javascript">
		$(document).ready(function() {
			$('input[name="questionType"]').change(function(){
				loadChoice();
			});
			loadChoice();
		});
		
		function loadChoice(){
			var choice = $('input[name="questionType"]:checked').val();
			if(choice == '${models.Question.QuestionType.SIMPLE_CHOICE }'){
				$('div#response_bloc input[type=radio]').show();
				$('div#response_bloc input[type=checkbox]').hide();
			}else if(choice == '${models.Question.QuestionType.MULTIPLE_CHOICE }'){
				$('div#response_bloc input[type=radio]').hide();
				$('div#response_bloc input[type=checkbox]').show();
			}else {
				$('div#response_bloc input[type=radio]').hide();
				$('div#response_bloc input[type=checkbox]').hide();
			}
		}
		</script>
		
		<p>
			<input type="submit" value="Next step" />
		</p>
	
	#{/form}
#{/if} 
#{elseif question != null && question.responses }
   <p>Congratulation</p>
#{/elseif} 
#{else}
   <h4>Step 2/2 : Responses</h4>
#{/else}








